---
type: tutorial
title:  Отправьте свой первый скрипт в браузер
description: >-
  Руководство: Создайте свой первый блог на Astro —

  Добавьте интерактивность на стороне клиента к вашей мобильной навигации с помощью тега скрипта Astro
i18nReady: true
---

import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Давайте добавим гамбургер-меню для открытия и закрытия ссылок на мобильных экранах, что потребует некоторой интерактивности на стороне клиента!

<PreCheck>
  - Создать компонент гамбургер-меню
  - Написать `<script>`, чтобы позволить посетителям вашего сайта открывать и закрывать меню навигации
  - Переместить ваш JavaScript в файл `.js`
</PreCheck>

## Создание компонента Hamburger

Создайте компонент `<Hamburger />`, чтобы открывать и закрывать ваше мобильное меню.

<Steps>
1. Создайте файл с именем `Hamburger.astro` в `src/components/`.


2. Скопируйте следующий код в ваш компонент. Он будет представлять собой 3-строчное меню «гамбургер» для открытия и закрытия навигационных ссылок на мобильных устройствах. (Вы добавите новые CSS-стили в `global.css` позже).

    ```astro title="src/components/Hamburger.astro"
    ---
    ---
    <div class="hamburger">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
    </div>
    ```

3. Поместите этот новый компонент `<Hamburger />` непосредственно перед компонентом `<Navigation />` в файле `Header.astro`.

    <details>
    <summary>Покажите мне код!</summary>

    ```astro title="src/components/Header.astro" ins={2,7}
    ---
    import Hamburger from './Hamburger.astro';
    import Navigation from './Navigation.astro';
    ---
    <header>
      <nav>
        <Hamburger />
        <Navigation />
      </nav>
    </header>
    ```
    </details>

4. Добавьте следующие стили для компонента Hamburger:

    ```css title="src/styles/global.css" ins={2-13, 56-58}
    /* стили для навигации */
    .hamburger {
      padding-right: 20px;
      cursor: pointer;
    }

    .hamburger .line {
      display: block;
      width: 40px;
      height: 5px;
      margin-bottom: 10px;
      background-color: #ff9776;
    }

    .nav-links {
      width: 100%;
      top: 5rem;
      left: 48px;
      background-color: #ff9776;
      display: none;
      margin: 0;
    }

    .nav-links a {
      display: block;
      text-align: center;
      padding: 10px 0;
      text-decoration: none;
      font-size: 1.2rem;
      font-weight: bold;
      text-transform: uppercase;
    }

    .nav-links a:hover, a:focus {
      background-color: #ff9776;
    }

    .expanded {
      display: unset;
    }

    @media screen and (min-width: 636px) {
      .nav-links {
        margin-left: 5em;
        display: block;
        position: static;
        width: auto;
        background: none;
      }

      .nav-links a {
        display: inline-block;
        padding: 15px 20px;
      }

      .hamburger {
        display: none;
      }
    }
    ```
</Steps>


## Напишите ваш первый тег скрипта

Ваш заголовок ещё не **интерактивен**, потому что он не может реагировать на ввод пользователя, например, на нажатие на гамбургер-меню, чтобы показать или скрыть навигационные ссылки.

Добавление тега `<script>` предоставляет JavaScript на стороне клиента, чтобы «прослушивать» события пользователя и реагировать соответствующим образом.

<Steps>
1. Добавьте следующий тег `<script>` в `index.astro`, непосредственно перед закрывающим тегом `</body>`.

    ```astro title="src/pages/index.astro" ins={2-6}
      <Footer />
      <script>
        document.querySelector('.hamburger').addEventListener('click', () => {
          document.querySelector('.nav-links').classList.toggle('expanded');
        });
      </script>
    </body>
    ```

2. Снова проверьте предварительный просмотр в браузере на различных размерах экрана и убедитесь, что у вас есть работающее меню навигации, которое реагирует как на размер экрана, так и на действия пользователя на этой странице.
</Steps>

### Импортируйте файл `.js`

Вместо того чтобы писать JavaScript непосредственно на каждой странице, вы можете перенести содержимое тега `<script>` в собственный файл `.js` в вашем проекте.

<Steps>
1. Создайте файл `src/scripts/menu.js (вам придется создать новую папку `/scripts/`) и перенесите в него ваш JavaScript.

    ```js title="src/scripts/menu.js"
    document.querySelector('.hamburger').addEventListener('click', () => {
      document.querySelector('.nav-links').classList.toggle('expanded');
    });
    ```

2. Замените содержимое тега `<script>` в файле `index.astro` на следующий импорт файла:

    ```astro title="src/pages/index.astro" ins={7} del={3-5}
      <Footer />
      <script>
        document.querySelector('.hamburger').addEventListener('click', () => {
          document.querySelector('.nav-links').classList.toggle('expanded');
        });

        import "../scripts/menu.js";
      </script>
    </body>
    ```

3. Проверьте предварительный просмотр в браузере снова на меньших размерах и убедитесь, что меню гамбургера по-прежнему открывает и закрывает ваши навигационные ссылки.

4. Добавьте тот же `<script>` с импортом на две другие страницы, `about.astro` и `blog.astro`, и убедитесь, что на каждой из них есть отзывчивая интерактивная шапка.

    ```astro title="src/pages/about.astro & src/pages/blog.astro" ins={2-4}
      <Footer />
      <script>
        import "../scripts/menu.js";
      </script>
    </body>
    ```
</Steps>

:::note[На заметку]
Ранее вы уже использовали JavaScript для создания некоторых частей вашего сайта:

- Динамического определения заголовка и названия страницы
- Отображения списка навыков на странице «О сайте»
- Отображения HTML-элементов по условию


Все эти команды выполняются во время сборки для создания статического HTML для вашего сайта, а затем код «отбрасывается».

**JavaScript в теге `<script>` отправляется в браузер** и доступен для выполнения при взаимодействии с пользователем, например, при обновлении страницы или переключении ввода.
:::



<Box icon="question-mark">

###  Проверьте свои знания

1. Когда Astro выполняет JavaScript, написанный в метаданных компонента?
    <MultipleChoice>
      <Option>
       Astro никогда не выполняет JavaScript
      </Option>
      <Option isCorrect>
        во время сборки
      </Option>
      <Option>
        когда посетитель нажимает на кнопку
      </Option>
    </MultipleChoice>

2. Дополнительно, Astro может отправить JavaScript в браузер, чтобы разрешить:
    <MultipleChoice>
      <Option>
        пользователям переходить по ссылкам на странице
      </Option>
      <Option>
        ускорение загрузки
      </Option>
      <Option isCorrect>
        интерактивность на стороне клиента
      </Option>
    </MultipleChoice>

3. JavaScript на стороне клиента будет отправлен в браузер пользователя, когда он будет написан или импортирован:
    <MultipleChoice>
      <Option isCorrect>
        в тегах `<script>`
      </Option>
      <Option>
        между разделителями кода в файле `.astro`
      </Option>
      <Option>
        в `global.css`
      </Option>
    </MultipleChoice>

</Box>

<Box icon="check-list">

## Контрольный список

<Checklist>
- [ ] Я умею добавлять интерактивность на стороне клиента с помощью JavaScript в теге `<script>`.
- [ ] Я умею импортировать файл `.js` в тег `<script>`.
</Checklist>

</Box>

### Ресурсы

[Клиентские скрипты Astro](/ru/guides/client-side-scripts/)
